<template>
	<view class="main-container">
		<view class="main-top">
			<tn-navbar back-text="大牌美食" text-color="#333" fixed :bottom-shadow="false" bg-color="#fff"></tn-navbar>
			<view class="main-search c-flex c-row-center c-col-center">
				<input class="search-input" placeholder="请输入商家/商品名称" placeholder-class="pclazz">
			</view>
			<view class="main-tab bg-color-white c-p-t-5">
				<tn-tabs v-model="currentTabIndex" :scroll="false" active-color="rgb(71, 109, 234)"
					bar-color="rgb(71, 109, 234)">
					<tn-tabs-item v-for="(item, index) in tabsData" :key="index" :title="item.name" />
				</tn-tabs>
			</view>
		</view>
		<scroll-view scroll-y class="main-content" :style="{ height: height + 'px' }" :scroll-top="scrollTop"
			:scroll-y="true" :scroll-with-animation="false" @scroll="scroll" @scrolltolower="scrolltolower">
			<tn-swiper :data="swiperData" width="100%" height="280rpx" indicator indicator-type="dot">
				<template #default="{ data }">
					<view class="pos-rel bg-color-white c-flex c-flex-nowrap c-row-left c-col-top c-p-l-10 c-p-r-10">
						<view class="c-flex c-row-left c-col-top">
							<image :src="data.imgUrl" class="img"></image>
						</view>
						<view class="c-flex-divide c-flex-col c-p-l-10 c-p-b-20">
							<view class="title u-line-1">
								<text class="color-5555 font-size-13" v-text="data.title"></text>
							</view>
							<view class="c-m-t-5 c-flex c-flex-nowrap c-row-between c-col-center">
								<text class="font-size-12 color-aaaa" v-text="data.name"></text>
								<text class="font-size-12 color-3333" v-text="data.distance"></text>
							</view>
							<view class="c-m-t-5 c-flex c-flex-nowrap c-row-left c-col-center">
								<image class="eye"
									src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3566.png">
								</image>
								<text class="c-m-l-5 font-size-12 color-aaaa">20</text>
								<image class="qie c-m-l-5"
									src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3567.png">
								</image>
								<text class="c-m-l-5 font-size-12 color-aaaa">20</text>
							</view>
							<view class="c-m-t-8">
								<text class="font-size-14 font-w-7 color-476d">￥14.70</text>
							</view>
							<view class="c-m-t-4 c-p-b-15">
								<text class="font-size-12 color-aaaa text-decor">￥15.00</text>
							</view>
						</view>
						<view :class="['pos-abs', 'abs-status', 'status-' + data.status]">
							<text class="font-size-13 color-white" v-text="statusObject[data.status]"></text>
						</view>
					</view>
				</template>
			</tn-swiper>
			<view class="bg-color-white c-flex c-row-center c-col-center nomore">
				<tn-loadmore status="nomore" :text="customLoadMoreText" />
			</view>
			<view class="sub bg-color-white">
				<tn-subsection v-model="subsectionValue" size="32rpx" active-color="#6164ff" mode="button">
					<tn-subsection-item title="综合" />
					<tn-subsection-item title="最新" />
					<tn-subsection-item title="价格" />
					<tn-subsection-item title="销量" />
				</tn-subsection>
			</view>
			<view class="c-p-l-10 c-p-r-10 bg-color-white">
				<view class="data-list">
					<view v-for="(item, index) in dataList" :key="index" class="data-item pos-rel c-flex c-flex-nowrap">
						<view class="br-img">
							<image src="https://img.alicdn.com/bao/uploaded/i1/79039087/O1CN013zCuqz2GztcAUCTCT_!!79039087.jpg">
							</image>
						</view>
						<view class="c-flex-divide c-flex-col c-p-l-10">
							<view class="">
								<text class="font-size-13 color-5555">【鹿子星茶】奶香奶茶系列</text>
							</view>
							<view class="c-flex c-flex-nowrap c-row-between c-col-center c-m-t-5">
								<text class="font-size-12 color-aaaa">鹿野茶（天一店）</text>
								<text class="font-size-12 color-3333">258m</text>
							</view>
							<view class="c-m-t-5 c-flex c-flex-nowrap c-row-left c-col-center">
								<image class="eye"
									src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3566.png">
								</image>
								<text class="c-m-l-5 font-size-12 color-aaaa">20</text>
								<image class="qie c-m-l-5"
									src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E9%A6%96%E9%A1%B5/u3567.png">
								</image>
								<text class="c-m-l-5 font-size-12 color-aaaa">20</text>
							</view>
							<view class="c-m-t-8">
								<text class="font-size-14 font-w-7 color-476d">￥14.70</text>
							</view>
							<view class="c-m-t-4">
								<text class="font-size-12 color-aaaa text-decor">￥15.00</text>
							</view>
							<view :class="['pos-abs', 'abs-status', 'status-' + item.status]">
								<text class="font-size-13 color-white" v-text="statusObject[item.status]"></text>
							</view>
						</view>
					</view>
				</view>
				<view v-show="isLoading" class="c-flex c-flex-nowrap c-row-center c-col-center">
					<tn-loading show animation type="primary" size="40rpx" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
	import { ref, unref, onMounted, getCurrentInstance, nextTick } from 'vue'

	const customLoadMoreText = {
		nomore: '附近活动',
	}

	const subsectionValue = ref(0)

	const height = ref(300)

	const currentTabIndex = ref(0)

	const statusObject = unref({
		0: '砍价',
		1: '继续砍价',
		2: '已抢完'
	})

	const swiperData = ref([
		{
			imgUrl: 'https://img.alicdn.com/bao/uploaded/i1/75300233/O1CN01DTONDI1DaksSHaWPC_!!75300233.jpg',
			title: '【川渝巴适烧烤】双人烤鱼盛宴',
			name: '川渝巴适烧烤',
			distance: '286m',
			status: 0
		},
		{
			imgUrl: 'https://img.alicdn.com/bao/uploaded/i1/75300233/O1CN01DTONDI1DaksSHaWPC_!!75300233.jpg',
			title: '【川渝巴适烧烤】双人烤鱼盛宴',
			name: '川渝巴适烧烤',
			distance: '286m',
			status: 0
		},
		{
			imgUrl: 'https://img.alicdn.com/bao/uploaded/i1/75300233/O1CN01DTONDI1DaksSHaWPC_!!75300233.jpg',
			title: '【川渝巴适烧烤】双人烤鱼盛宴',
			name: '川渝巴适烧烤',
			distance: '286m',
			status: 0
		},
		{
			imgUrl: 'https://img.alicdn.com/bao/uploaded/i1/75300233/O1CN01DTONDI1DaksSHaWPC_!!75300233.jpg',
			title: '【川渝巴适烧烤】双人烤鱼盛宴',
			name: '川渝巴适烧烤',
			distance: '286m',
			status: 0
		},
		{
			imgUrl: 'https://img.alicdn.com/bao/uploaded/i1/75300233/O1CN01DTONDI1DaksSHaWPC_!!75300233.jpg',
			title: '【川渝巴适烧烤】双人烤鱼盛宴',
			name: '川渝巴适烧烤',
			distance: '286m',
			status: 0
		}
	])
	const isLoading = ref<boolean>(false)

	const scrollTop = ref<number>(0)

	const tabsData = unref([
		{
			name: '全部'
		},
		{
			name: '地方菜系'
		},
		{
			name: '日韩料理'
		},
		{
			name: '自助餐·火锅'
		},
		{
			name: '其他'
		}
	])

	const dataList = ref([])

	const initDataList = () => {
		for (let i = 0; i < 10; i++) {
			dataList.value.push({
				name: '【鹿子星茶】奶香奶茶系列',
				status: i % 3
			})
		}
	}

	onMounted(() => {
		const instance = getCurrentInstance()
		uni.createSelectorQuery().in(instance).select('.main-top').fields({
			size: true,
		}, data => {
			height.value = uni.getSystemInfoSync().screenHeight - data.height
		}).exec()
		initDataList()
	})

	const scroll = (e : any) => {
		const { detail } = e
		scrollTop.value = detail.scrollTop
	}
	const scrolltolower = (e : any) => {
		if (isLoading.value) {
			return
		}
		isLoading.value = true
		setTimeout(() => {
			isLoading.value = false
			nextTick(initDataList)
		}, 3000)
	}
</script>
<style scoped lang="scss">
	.main-container {
		overflow-y: hidden;
	}

	.main-search {
		height: 80rpx;

		.search-input {
			width: 700rpx;
			height: 64rpx;
			background-color: rgba(209, 209, 209, 0.2);
			border-radius: 32rpx;
			text-align: center;
		}

		.pclazz {
			color: rgb(153, 153, 153);
			font-family: "苹方 常规", "苹方 中等", 苹方;
			font-feature-settings: kern;
			font-kerning: normal;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
		}
	}

	.main-tab {
		height: 100rpx;
	}

	.img {
		width: 290rpx;
		height: 216rpx;
	}

	.nomore {
		height: 100rpx;
	}

	.sub {
		height: 80rpx;
	}
</style>